<template>
  <div class="addblog">
    <div v-if="isShow">
      <h1>添加博客</h1>
      <div class="box">
        <label for="title">
          博客标题
        </label>
        <input id="title" type="text" v-model="title">
      </div>
      <div class="box">
        <label for="content">
          博客内容
        </label>
        <textarea id="content" cols="30" rows="10" v-model="content"></textarea>
      </div>
      <div class="box">
        <ul class="clearfix">
          <li v-for="(item, index) in categoryList" :key='index'><input type="checkbox" v-model="category" :value="item">{{item}}</li>
        </ul>
      </div>
      <div class="box">
        <label for="author">作者</label>
        <select id="author" v-model="author">
          <option v-for="(item,index) in authorList" :key="index">{{item}}</option>
        </select>
      </div>
      <button @click="addBlog">添加博客</button>
      <hr>
    </div>
    <div v-if="!isShow">
      <h1>恭喜!内容添加成功!!!!</h1>
    </div>
    <h1>博客总览</h1>
    <p>博客标题:<span>{{title}}</span></p>
    <p>博客内容:<span>{{content}}</span></p>
    <p>博客分类:<span v-for="(item,index) in category" :key="index">{{item}}</span></p>
    <p>博客作者:<span>{{author}}</span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      title: "",
      content: "",
      category: [],
      author: "",
      categoryList: ["Vue.js", "Angular4.js", "React.js", "Node.js"],
      authorList: ["徐冠雄1", "徐冠雄2", "徐冠雄3"]
    };
  },

  methods: {
    addBlog() {
      this.$axios
        .post("/users", {
          title: this.title,
          content: this.content,
          category: this.category,
          author: this.author
        })
        .then(res => {
          if (res.status == 201) {
            this.isShow = false;
          }
        });
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.addblog {
  min-width: 500px;
  margin: 0 auto;
  padding: 0 40px;
  h1 {
    margin-bottom: 20px;
  }
  label {
    display: block;
    margin-bottom: 5px;
  }
  .box {
    margin-bottom: 20px;
    input[type="text"] {
      width: 100%;
    }
    textarea {
      width: 100%;
    }
    li {
      float: left;
      margin-right: 25px;
    }
    select {
      width: 100%;
      border-radius: 3px;
    }
  }
  button {
    background-color: red;
    border: 1 solid black;
    padding: 10px 40px;
    margin-bottom: 10px;
  }
  hr {
    margin: 0 auto;
  }
}
</style>
